<template>
  <div class="app-container">
    <el-steps :active="step" finish-status="success" simple>
      <el-step title="学员信息"/>
      <el-step title="客户信息"/>
      <el-step title="订购课程"/>
    </el-steps>
    <div v-if="step === 0" class="step-container">
      <el-form ref="studentForm" :model="studentForm" :rules="studentRules" label-width="100px">
        <el-form-item label="学员姓名" prop="studentName">
          <el-col :span="12">
            <el-input v-model="studentForm.studentName" placeholder="学员姓名" />
          </el-col>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="24">
            <el-date-picker v-model="studentForm.birthDate" :picker-options="pickerOptions" type="date" placeholder="出生日期"/>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="studentForm.gender" placeholder="性别">
            <el-option
              v-for="item in genderArray"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="所在学校" prop="school">
          <el-col :span="12">
            <el-input v-model="studentForm.school" placeholder="所在学校" />
          </el-col>
        </el-form-item>
        <el-form-item label="当前年级" prop="grade">
          <el-select v-model="studentForm.grade" placeholder="请选择年级">
            <el-option-group
              v-for="group in gradeArray"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item>
          <el-button type="primary" @click="nextStep('studentForm')">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 客户信息 -->
    <div v-if="step === 1" class="step-container">
      <el-form ref="customerForm" :model="customerForm" :rules="customerRules" label-width="100px">
        <el-form-item label="客户姓名" prop="name">
          <el-col :span="12">
            <el-input :readonly="readonly" v-model="customerForm.name" placeholder="客户姓名" />
          </el-col>
        </el-form-item>
        <el-form-item label="与学员关系" prop="relation">
          <el-col :span="12">
            <el-input v-model="studentForm.relation" placeholder="爸爸、妈妈、本人" />
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-col :span="12">
            <el-input :readonly="readonly" v-model="customerForm.mobile" placeholder="联系电话" />
          </el-col>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-col :span="24">
            <el-input :readonly="readonly" v-model="customerForm.address" placeholder="家庭住址" />
          </el-col>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item>
          <el-button type="success" @click="step--">上一步</el-button>
          <el-button type="primary" @click="nextStep('customerForm')">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 订单信息 -->
    <div v-if="step === 2" class="step-container step-course">
      <el-form ref="courseForm" :model="courseForm" label-width="100px">
        <div v-for="(item, index) in courseForm.courses" :key="index">
          <el-row>
            <el-col :span="8">
              <el-form-item label="订购课程" :rules="{required: true, message: '请选择课程', trigger: 'change'}">
                <el-select v-model="item.courseId" filterable clearable placeholder="选择订购课程" @change="selectCourse(item)">
                  <el-option v-for="course in courses" :key="course.courseId" :label="course.courseName" :value="course.courseId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :prop="'courses.' + index + '.courseHour'" :rules="{required: true, message: '请输入课时', trigger: 'change'}" label="订购课时">
                <el-input-number v-model="item.courseHour" :min="1" controls-position="right" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button icon="el-icon-minus" circle @click="removeCourse(index)" />
              <el-button v-if="index === courseForm.courses.length - 1" icon="el-icon-plus" circle @click="addCourse"/>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="支付金额" :rules="{required: true, message: '请输入缴费金额', trigger: 'blur'}">
              <el-input-number v-model="courseForm.amount" :min="0" controls-position="right" />
            </el-form-item>
          </el-col>
          <el-col :span="8">

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="支付方式" :rules="{required: true, message: '请选择支付方式', trigger: 'change'}">
              <el-select v-model="courseForm.chargeType" @change="courseChargeChange">
                <el-option v-for="type in chargeTypes" :key="type.value" :value="type.value" :label="type.label"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="courseForm.chargeType !== 1" :label="courseOrderLabel">
              <el-input v-model="courseForm.orderNo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="优惠方式" :rules="{required: true, message: '请选择优惠方式', trigger: 'blur'}">
              <el-select v-model="courseForm.promotionMethod">
                <el-option v-for="type in promotionMethods" :key="type.value" :value="type.value" :label="type.label"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  v-if="courseForm.promotionMethod !== 0" label="折扣率">
              <el-input v-model="courseForm.discount" :min="0" :max="1.0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                :autosize="{ minRows: 4 }"
                v-model="courseForm.remark"
                type="textarea"
                placeholder="当前订单参与优惠方案等..."/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div style="text-align:center">
          <el-button type="success" @click="step--">上一步</el-button>
          <el-button v-loading="courseLoading" type="primary" @click="onSubmit">立即报名</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { listAllCourse } from '@/api/course'
import { detail } from '@/api/customer'
import { addStudentSign } from '@/api/student'
export default {
  data() {
    return {
      step: 0,
      readonly: false,
      gradeArray: this.$store.getters.gradeArray,
      genderArray: this.$store.getters.genderArray,
      chargeTypes: this.$store.getters.chargeTypes,
      promotionMethods: this.$store.getters.promotionMethods,
      customerForm: {
        merchantCustomerId: 0,
        name: '',
        mobile: '',
        address: ''
      },
      studentForm: {
        relation: '',
        studentName: '',
        school: '',
        gender: 0,
        grade: 0,
        birthDate: ''
      },
      courseLoading: false,
      courses: [],
      courseForm: {
        courses: [
          {
            courseId: '',
            courseHour: 0,
            largessHour: 0,
            fee: 0
          }
        ],
        amount: 0,
        chargeType: 1,
        orderNo: '',
        promotionMethod: 0,
        discount: '1.0',
        remark: ''
      },
      courseOrderLabel: '流水号',
      studentRules: {
        studentName: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        relation: [{ required: true, message: '请确定学员与客户关系', trigger: 'change' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        school: [{ required: false, message: '请输入所在学校', trigger: 'change' }],
        grade: [{ required: false, message: '请输入年级', trigger: 'change' }]
      },
      customerRules: {
        name: [{ required: true, message: '请输入客户姓名', trigger: 'change' }],
        mobile: [{ required: true, message: '请输入客户联系方式', trigger: 'change' }]
      },
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now()
        }
      }
    }
  },
  computed: {
    
  },
  mounted() {
    listAllCourse().then(res => {
      this.courses = res.data
    })
    this.customerForm.merchantCustomerId = this.$route.query.merchantCustomerId
    if (this.customerForm.merchantCustomerId) {
      detail(this.customerForm.merchantCustomerId).then(res => {
        this.readonly = true
        const data = res.data
        // 学员信息
        this.studentForm.relation = data.relation
        this.studentForm.studentName = data.studentName
        this.studentForm.grade = data.grade
        this.studentForm.gender = data.gender
        this.studentForm.school = data.school
        this.studentForm.birthDate = data.birthDate
        this.$nextTick(() => {
          this.nextStep('studentForm')
        })
        // 客户信息
        this.customerForm.name = data.name
        this.customerForm.mobile = data.mobile
        this.customerForm.address = data.address
        // 跳转学员信息页
        this.nextStep('customerForm')
      })
    }
  },
  methods: {
    nextStep(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.step >= 2) {
            this.step = 2
          } else {
            this.step++
          }
        }
      })
    },
    addCourse() {
      this.courseForm.courses.push({
        courseId: ''
      })
    },
    removeCourse(index) {
      if (this.courseForm.courses.length === 1) {
        this.$message({
          message: '请手下留情, 要没了',
          type: 'warning'
        })
        return
      }
      this.courseForm.courses.splice(index, 1)
    },
    selectCourse(item) {
      this.courses.forEach(c => {
        if (item.courseId === c.id) {
          return
        }
      })
    },
    onSubmit() {
      this.$refs.courseForm.validate(valid => {
        if (valid) {
          if (this.courseForm.chargeType !== 1 && !this.courseForm.orderNo) {
            this.$message.warning('没有填写支付流水号!')
          }
          this.$confirm('确认报名吗？请确认当前订单信息没有错误', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            const data = Object.assign(this.studentForm, this.customerForm, {
              courseInfoList: this.courseForm.courses
            }, {
              amount: this.courseForm.amount,
              chargeType: this.courseForm.chargeType,
              payOrderNo: this.courseForm.orderNo,
              promotionMethod: this.courseForm.promotionMethod,
              discount: this.courseForm.discount,
              remark: this.courseForm.remark
            })
            this.courseLoading = true
            addStudentSign(data).then(() => {
              this.$message({
                message: '报名成功',
                type: 'success'
              })
              this.$router.push({
                path: '/customer/order'
              })
            }).finally(() => {
              this.courseLoading = false
            })
          })
        }
      })
    },
    courseChargeChange(chargeType) {
      if (chargeType === 4) {
        this.courseOrderLabel = '银行流水号'
      } else {
        this.courseOrderLabel = '支付单号'
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .app-container{
    .step-container{
      width: 50%;
      margin: auto;
      padding-top: 50px;
    }
    .step-course{
      width: 70%;
    }
  }
  .el-form{
    padding: 20px
  }
</style>
